vue常见面试题

Vue2 和 vue3的区别

• 响应式系统：defineProperty → Proxy。可以拦截新增/删除属性、数组索引等，响应式更彻底、更快。原先的defineProperty只能修改值。
• Vue3 推出了组合式 API，引入了 <script setup> 的语法糖，省去了手动声明 setup() 并返回变量的过程，让组件逻辑更简洁、结构更清晰、类型推导也更强。

// vue 3
<script setup>
import { ref } from 'vue'
const count = ref(0)
const increment = () => count.value++
</script>

• Vue3 的重构提升了初始渲染速度和内存使用。尤其在大型项目中优势明显。
• Vue3 天生支持 TypeScript，且拓展能力更强，支持自定义渲染器（比如渲染到 Canvas、WebGL）

v-if和v-show

• v-if为false 不渲染，v-show总渲染，只是隐藏。
• v-if会在真实dom上创建和销毁元素。v-show改变dom节点属性
• v-if引起dom局部重构，v-show修改css的display属性（display:none）
• v-if切换时开销大，v-show切换更快
• v-if 使用场景：切换频率较低的场景，v-show适用于切换频率高的场景。

vue组件通信

1. 父传子：父组件传数据给子组件

   <!-- 父组件 -->
   <MyButton :label="btnText" />
   
   <script setup>
   defineProps({
     label: String
   })
   </script>
   
   <template>
     <button>{{ label }}</button>
   </template>

2. 子组件传给父组件。子组件通过 emit 向上传递事件，父组件监听事件。

<!-- 子组件：MyButton.vue -->
<script setup>
const emit = defineEmits(['click'])

function handleClick() {
  emit('click', '子组件数据')
}
</script>

<template>
  <button @click="handleClick">点我</button>
</template>

<!-- 父组件 -->
<script setup>
function handleChildClick(data) {
  console.log('收到子组件传来的：', data)
}
</script>

<template>
  <MyButton @click="handleChildClick" />
</template>

3. 跨层通信 provide/inject 如果要通信的组件隔了很多层，需要props向下逐级穿透，麻烦且不好维护，这时可以用到注入依赖。

// promise接收两个参数，一个变量名，一个value。值可以是任意类型，包括响应式的状态
<script setup>
provide('theme','dark')
</script>

// 组件后代
const theme = inject('theme')
console.log(theme) // 'dark'

provide可以在应用层面提供依赖

import { createApp } from 'vue'

const app = createApp({})

app.provide('message', /* 值 */ 'hello!')

4. 状态管理通信，使用 pinia 管理全局状态

适合跨组件甚至跨页面通信，解耦组件之间的依赖。

生命周期